iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 20

Day20 網頁前端-刻意練習(Flex時光屋#2)

  • 分享至 

  • xImage
  •  

Day20 六角 Flex時光屋#2

https://ithelp.ithome.com.tw/upload/images/20200920/20129161peDiPztIZl.jpg
https://ithelp.ithome.com.tw/upload/images/20200920/20129161KMajXi52gk.png

簡單小語

自己切了這個版,才發現原來Bootstrap真的很好用,觸發的事件自己寫過才知道,要如何去撰寫,要如何設計架構,才能讓每次點擊時,右側的內容會更換,其實也是突發奇想的試做,做之前還在懷疑說我寫的出來嗎?後來幾番思考了一下,還真的做出來了,不過就是挺陽春就是,刻意練習也是訓練自己思考,訓練自己撰寫方式,慢慢感受刻意練習所帶來了踏實及進步,加油還有十天。

筆記分享

  1. 再次強調paddingmargin推移的距離需熟稔掌握,才能心有戚戚焉得切版。
  2. 觸發事件使用不同的class做不同效果,分別為共同樣式設定的class及觸發事件所需呈現及消失的class。
  3. JQuery的尺寸判斷還不熟悉,if ($(window).width < 768px) {…event…}
  4. JQuery觸發效果的掌握及使用,雖認為是基本功,但每次練習卻也還是會有不熟悉得時後。
  5. JQuery觸發呈現樣式的使用,雖不知未來實用性但每增加一個效果,就是熟悉一次寫法的時候。
  6. 內容物僅作flex的排版並無太多動畫及過場效果。
  7. 已完售商品則是使用為元素製作“X”凸顯效果。
  8. 結帳頁面是拿內容頁面做修改,可以精簡程式碼並減少重複撰寫的步驟。
  9. RWD則是受限於空間使用,而讓一些樣式不顯示,手機觀看以舒適及適當的資訊量為主軸。
  10. RWD須控制好寬度及高度,避免佔滿使用者畫面,第一觀感不佳。

刻意練習

Practice(200812 Day 20)

首次練習

Hex_Flex時光屋_9_訂單明細
Hex_Flex時光屋_10_產品列表


2020 iT邦幫忙鐵人賽 Day20 網頁前端-刻意練習(Flex時光屋#2)


上一篇
Day19 網頁前端-刻意練習(Flex時光屋#1)
下一篇
Day21 網頁前端-刻意練習(名片練習)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言